<template>
  <div class="scene-container">
    <div class="header">
      <div>
        <span class="round-text">社区警务基础场景处置</span>
      </div>
    </div>

    <el-divider />

    <!-- 卡片网格 -->
    <div class="container">
      <!-- 介绍环节 -->
      <div class="card-interface" v-if="introduce">
        <div class="timer-introduce" :class="{ warning: timeLeft <= 10 }">
          <i class="el-icon-time" @click="startTimer"></i>剩余时间:
          {{ formatTime(timeLeft) }}
        </div>
        
        <div class="stu-card">
          <div class="img-container">
            <img :src="student[studnetIndex].image" alt="" />
          </div>
          <div class="stu-info">
            <div class="info-rowname">
              <!-- <label class="num-info"><pre style="font-weight: bold;">姓 &nbsp;名:</pre></label> -->
              <span>{{ student[studnetIndex].name }}</span>
            </div>
            <div class="info-row">
              <!-- <label class="num-info"><pre>工作单位:</pre></label> -->
              <span>{{ student[studnetIndex].address }}</span>
            </div>
            <!-- <div class="info-row">
              <label class="num-info"><pre>所属社区:</pre></label>
              <span>{{ student[studnetIndex].community }}</span>
            </div> -->
            
          </div>
        </div>
        <!-- <p class="intro-text">限时1分钟介绍本辖区亮点工作和突出成效</p> -->
        <el-button type="primary" size="large" @click="setIntroduce">选择场景</el-button>
      </div>


      <!-- <div class="scene-selection" v-if="!introduce && !selectedCard">
        <div class="scene-types">
          <div  class="scene-type" v-for="item,index in sceneTypes" :key="index" @click="selectCard(item)">
          
            <h2>{{ index+1 }}</h2>
          </div>
        </div>
      </div>


      <div>

      </div> -->

      <!-- 场景选择界面 -->
      <div class="scene-selection" v-if="!introduce && !selectedCard">
        <div class="scene-types">
          <div v-for="(type, index) in sceneTypes" :key="index" class="scene-type" @click="seleScene(type)">
            <h2 v-if="slelectSceneTypes == type" >{{ type.name }}</h2>
            <h2>{{ index+1 }}</h2>
            <p class="selection-count">已选择 {{ getTypeSelectionCount(type.id) }}/3 次</p>
            <div class="scene-buttons" v-if="slelectSceneTypes == type">
              <el-button 
                v-for="scene in getScenesByType(type.id)"
                :key="scene.id"
                :disabled="getTypeSelectionCount(type.id) >= 3"
                @click="selectScene(scene)"
                type="primary"
                size="large"
              >
                {{ scene.content }}
              </el-button>
            </div>
          </div>
        </div>
      </div>


      <!-- <div class="scene-selection" v-if="!introduce && !selectedCard">
        <div class="scene-types">
          <div class="scene-type" @click="seleScene(type)">
            <h2>{{ onType.name }}</h2>
            <p class="selection-count">已选择 {{ getTypeSelectionCount(type.id) }}/3 次</p>
            <div class="scene-buttons" v-if="slelectSceneTypes == type">
              <el-button 
                v-for="scene in getScenesByType(onType.id)"
                :key="scene.id"
                :disabled="getTypeSelectionCount(onType.id) >= 3"
                @click="selectScene(scene)"
                type="primary"
                size="large"
              >
                {{ scene.content }}
              </el-button>
            </div>
          </div>
        </div>
      </div> -->

      <!-- 选中的场景题详情 -->
      <div v-if="!introduce && selectedCard" class="scene-detail">
        <div class="scene-content">
          <div class="timer" :class="{ warning: timeLeft <= 30 }">
            <i class="el-icon-time" @click="startTimer"></i>剩余时间:
            {{ formatTime(timeLeft) }}
          </div>
          
          <!-- <div class="header-row">
            <h1>场景 {{ selectedNumber }}</h1>
          </div> -->
          
          <div class="question">
            <h2>{{ currentScene.content }}</h2>
            <p>题目描述：{{ currentScene.awtent }}</p>
            <!-- <p>{{ currentScene.content }}</p> -->
          </div>

          <div class="button-group">
            <!-- <el-button
              type="primary"
              size="large"
              @click="showAnalysis = !showAnalysis"
              class="analysis-btn"
            >
              {{ showAnalysis ? "隐藏分析" : "查看分析" }}
            </el-button> -->
            <el-button 
              size="large" 
              @click="completeAndReturn" 
              class="back-btn"
            >完成并返回</el-button>
          </div>

          <div class="analysis" v-if="showAnalysis">
            <h2>得分点分析：</h2>
            <ol>
              <li v-for="(point, index) in currentScene.analysis" :key="index">
                {{ point }}
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>

    <div class="btn">
      <el-button @click="() => this.$router.go(-1)" icon="el-icon-arrow-left">
      </el-button>
      <el-button
        @click="() => this.$router.push({ name: 'ListQuick' })"
        icon="el-icon-arrow-right"
        style="float: right"
      >
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "SceneQuState",

  data() {
    return {
      selectedNumber: null,
      selectedCard: null,
      showAnalysis: false,
      completedCards: [],
      isShuffling: false,
      timeLeft: 60,
      timer: null,
      introduce: true,
      contentAwent:false,
      slelectSceneTypes:null,
      onType:{id: '', name:""},
      typeSelections: {
        1: 0, // 校园安全宣传
        2: 0, // 小区安全宣传  
        3: 0, // 法治教育
        4: 0  // 矛盾纠纷排查化解
      },
      sceneTypes: [
        { id: 1, name: '未保安全宣传' },
        { id: 2, name: '小区安全宣传' },
        { id: 3, name: '法治教育' },
        { id: 4, name: '矛盾纠纷排查化解' }
      ],
      student: [
        { name: "张一", image: "images/wj.png",address:"长沙市公安局芙蓉分局湘湖社区民警",community:"湘湖社区" },
        { name: "张二", image: "images/zrn.png",address:"警察局",community:"湘湖社区" },
        { name: "张三", image: "images/zy.png" ,address:"警察局",community:"湘湖社区"},
        { name: "张四", image: "images/lyf.png" ,address:"警察局",community:"湘湖社区"},
        { name: "张五", image: "images/wj.png" ,address:"警察局",community:"湘湖社区"},
        { name: "张六", image: "images/wj.png" ,address:"警察局",community:"湘湖社区"},
        { name: "张七", image: "images/wj.png" ,address:"警察局",community:"湘湖社区"},
        { name: "张八", image: "images/wj.png",address:"警察局",community:"湘湖社区" },
        { name: "张九", image: "images/wj.png" ,address:"警察局",community:"湘湖社区"},
        { name: "张十", image: "images/wj.png" ,address:"警察局",community:"湘湖社区"},
        { name: "张十一", image: "images/wj.png" ,address:"警察局",community:"湘湖社区"},
        { name: "张十二", image: "images/wj.png" ,address:"警察局",community:"湘湖社区"},
      ],
      studnetIndex: 0,
      sceneList: [
        {
          id: 1,
          typeId: 1,
          content: "防溺水",
          awtent:"夏季将近，辖区水塘、河流较多，请你走进辖区大同小学，针对1-6年级全体小学生，开展一次以防溺水为重点的安全宣传教育。",
          analysis: ["分析点1", "分析点2", "分析点3"]
        },
        {
          id: 2, 
          typeId: 1,
          content: "防性侵",
          awtent:"近期，辖区性侵案件频发，其中两起受害人为未成年人，请你组织辖区旅馆负责人，开展一次以防性侵为重点的安全宣传教育。",
          analysis: ["分析点1", "分析点2", "分析点3"]
        },
        {
          id: 3, 
          typeId: 1,
          content: "防欺凌",
          awtent:"作为辖区芙蓉中学的法制副校长，请你结合相关工作职责，针对学校校长和老师，开展一次以防欺凌为重点的安全宣传教育。",
          analysis: ["分析点1", "分析点2", "分析点3"]
        },
        {
          id: 4,
          typeId: 2, 
          content: "反电诈",
          awtent:"近期，辖区芙蓉小区3名老人被不法分子以网络刷单、虚假购物等方式诈骗，请你结合“百万警进千万家”活动，走进该小区针对60岁以上的老人开展反电诈宣传工作。",
          analysis: ["分析点1", "分析点2", "分析点3"]
        },
        {
          id: 5,
          typeId: 2,
          content: "保安",
          awtent:"近期，辖区丽苑小区因保安工作不到位，接连发生三起电动摩托车被盗案件，请你前往该小区，针对保安工作开展监督指导。",
          analysis: ["分析点1", "分析点2", "分析点3"]
        },
        {
          id: 6,
          typeId: 2,
          content: "重点单位安防",
          awtent:"临近年关，为指导辖区重点单位做好节日期间安全防范工作，请你组织有关单位安全负责人开展一次专题部署会，提出工作要求。",
          analysis: ["分析点1", "分析点2", "分析点3"]
        },
        {
          id: 7,
          typeId: 3,
          content: "扬言报复社会",
          awtent:"辖区居民王某因投资的理财产品暴雷，损失较大，多次在网络扬言要求退回本金，否则就报复社会，请你上门开展批评教育和化解处置。",
          analysis: ["分析点1", "分析点2", "分析点3"]
        },
        {
          id: 8,
          typeId: 3,
          content: "严重不良行为未成年人",
          awtent:"辖区未成年人张某，今年15岁，辍学在家，曾经多次结伙斗殴，属于严重不良行为未成年人，请你上门开展帮教转化工作。",
          analysis: ["分析点1", "分析点2", "分析点3"]
        },
        {
          id: 9,
          typeId: 3,
          content: "家暴加害人",
          awtent:"辖区居民张三和李四为夫妻关系，李四多次报警称被丈夫张三家暴，派出所民警已开具家庭暴力告诫书，请你上门查访，针对当事人开展反家暴教育工作。",
          analysis: ["分析点1", "分析点2", "分析点3"]
        },
        {
          id: 10,
          typeId: 4,
          content: "矛盾纠纷化解处置",
          awtent:"辖区居民王某和李某因出入电梯相互碰撞发生口角，两人产生轻微肢体冲突，均报警请求处理，请你上门针对当事人开展矛盾纠纷化解工作。",
          analysis: ["分析点1", "分析点2", "分析点3"]
        },
        {
          id: 11,
          typeId: 4,
          content: "矛盾纠纷工作部署",
          awtent:"临近年关，辖区进入矛盾纠纷高发期，请你组织社区警务团队成员，部署开展年前矛盾纠纷排查化解工作，提出工作要求。",
          analysis: ["分析点1", "分析点2", "分析点3"]
        },
        {
          id: 12,
          typeId: 4,
          content: "矛盾纠纷主题宣讲",
          awtent:"近期，辖区嘉盛小区因装修噪音引发的邻里矛盾纠纷警情较多，请你依托社区警校，以建立和谐邻里关系为主题，给小区居民上一堂课。",
          analysis: ["分析点1", "分析点2", "分析点3"]
        },
      ]
    };
  },

  computed: {
    currentScene() {
      return this.sceneList.find(scene => scene.id === this.selectedNumber) || {};
    }
  },

  methods: {
    getTypeSelectionCount(typeId) {
      return this.typeSelections[typeId];
    },

    getScenesByType(typeId) {
      return this.sceneList.filter(scene => scene.typeId === typeId);
    },

    selectScene(scene) {
      if(this.typeSelections[scene.typeId] >= 3) {
        this.$message.warning('该类型场景已达选择上限');
        return;
      }
      
      this.selectedNumber = scene.id;
      this.selectedCard = scene;
      this.typeSelections[scene.typeId]++;
      this.timeLeft = 180;
      // this.startTimer();
    },

    seleScene(scene){
      this.slelectSceneTypes = scene
    },

    selectCard(item){
      console.log(item);
      this.onType = item
    },
    
    setIntroduce() {
      this.introduce = false;
    },

    completeAndReturn() {
      if (this.introduce) {
        this.$message({
          message: "时间到了！",
          type: "warning",
          center: true,
        });
      } else {
        this.studnetIndex++;
      }

      this.selectedCard = null;
      this.slelectSceneTypes = null
      this.selectedNumber = null;
      this.showAnalysis = false;
      this.introduce = true;
      this.timeLeft = 60;
      this.clearTimer();
    },

    startTimer() {
      if (this.introduce) {
        this.timeLeft = 60;
      } else {
        this.timeLeft = 180;
      }

      this.clearTimer();
      this.timer = setInterval(() => {
        if (this.timeLeft > 0) {
          this.timeLeft--;
        } else {
          // this.completeAndReturn();
        }
      }, 1000);
    },

    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },

    formatTime(seconds) {
      const minutes = Math.floor(seconds / 60);
      const remainingSeconds = seconds % 60;
      return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
    }
  },

  beforeDestroy() {
    this.clearTimer();
  }
};
</script>

<style lang="scss" scoped>
.scene-container {
  font-size: 18px;
  width: 100%;
  min-height: 100vh;
  background-image: url("/images/bg.png");
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;

  .el-divider{
    margin: 0;
  }
  
}

.header {
  width: 100%;
  padding: 10px;
  text-align: center;
}

.round-text {
  font-size: 48px;
  font-weight: bold;
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.container {
  flex: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.timer-introduce {
  font-size: 42px;
  color: #f56c6c;
  font-weight: bold;
  margin-bottom: 30px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);

  &.warning {
    color: #f56c6c;
    animation: pulse 1s infinite;
  }
}

.card-interface {
  width: 90%;
  max-width: 1200px;
  background-color: rgba(255,255,255,0.95);
  border-radius: 15px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;

  .intro-text {
    font-size: 48px;
    color: #f56c6c;
    margin: 30px 0;
    font-weight: bold;
    text-align: center;
  }
}

.stu-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  margin: 20px 0;
  
  .img-container {
    width: 350px;
    height: 450px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .stu-info {


    .info-rowname{
        display: flex;
        margin: 30px 0;
        font-size: 32px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;

        .num-info pre {
          width: 140px;
          margin: 0;
          color: #585859;
          font-weight: bold;
          font-size: 36px;
        }

        label {
          width: 140px;
          text-align: right;
          margin-right: 30px;
          color: #606266;
          font-weight: bolder;
        }

        span {
          color: #303133;
          font-weight: bold;
          font-size: 36px;
        }

      }

    .info-row {
      display: flex;
      margin: 30px 0;
      font-size: 32px;
      

      .num-info pre{
        width: 140px;
        // text-align: ;
        margin: 0;
        color: #585859;
        font-weight: bold;
        font-size: 36px;
      }

      label {
        width: 140px;
        text-align: right;
        margin-right: 30px;
        color: #606266;
        font-weight: bolder;
      }
      
      span {
        color: #303133;
        font-weight: bold;
        font-size: 36px;
      }
    }
  }
}

.scene-selection {
  width: 90%;
  max-width: 1400px;
  background: rgba(255,255,255,0.95);
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);

  .scene-types {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  .scene-type {
    padding: 30px;
    border: 2px solid #315ec5;
    border-radius: 12px;
    text-align: center;
    background-color: #c0171c;

    h2 {
      font-size: 48px;
      color: #dfbe2a;
      margin-bottom: 20px;
      font-weight: bold;
    }

    .selection-count {
      font-size: 30px;
      color: #dfbe2a;
      margin-bottom: 25px;
    }

    .scene-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      justify-content: center;

      .el-button {
        font-size: 20px;
        padding: 15px 30px;
      }
    }
  }
}

.scene-detail {
  width: 90%;
  max-width: 1200px;
  background: rgba(255,255,255,0.95);
  border-radius: 15px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  text-align: center;

  .timer {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 30px;
    color: #f56c6c;
    &.warning {
      color: #f56c6c;
      animation: pulse 1s infinite;
    }
  }

  .header-row {
    margin: 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;

    h1 {
      font-size: 56px;
      font-weight: bold;
      color: #303133;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    }
  }

  .question {
    margin: 30px 0;
    text-align: start;

    h2 {
      font-size: 42px;
      color: #303133;
      margin-bottom: 20px;
      font-weight: bold;
    }

    p {
      font-size: 38px;
      line-height: 1.8;
      color: #606266;
      font-weight: 500;
    }
  }

  .button-group {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;

    .el-button {
      font-size: 24px;
      padding: 15px 40px;
    }
  }

  .analysis {
    padding: 30px;
    background: #f5f7fa;
    border-radius: 8px;
    margin-top: 30px;
    text-align: left;

    h2 {
      font-size: 42px;
      color: #409eff;
      margin-bottom: 20px;
      font-weight: bold;
      text-align: center;
    }

    ol {
      padding-left: 30px;

      li {
        font-size: 34px;
        margin-bottom: 15px;
        color: #606266;
        line-height: 1.6;
        font-weight: 500;
      }
    }
  }
}

.btn {
  width: 100%;
  position: fixed;
  bottom: 20px;
  opacity: 0.3;
  z-index: 1;
  padding: 0 20px;

  .el-button {
    font-size: 16px;
  }
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}
</style>